<template>
	<view class="uni-container flex flex-col h-full">
		<div v-if="!isView">
			<u-button type="success" size="default" @click="scanCode">扫描二维码</u-button>
		</div>
		<div class="flex-auto overflow-auto">
			<u-form ref="uForm">
				<u-form-item label="分类">
					<u-input v-model="formData.typeName" v-if="isView" disabled />
					<u-input v-model="formData.typeName" @click="typeShow=true" v-if="!isView" />
					<u-select v-model="typeShow" :list="typeList"
						@confirm="typeConfirm"></u-select>
				</u-form-item>
				<u-form-item label="库存">
					<u-input v-model="formData.stocks" :disabled="isView" />
				</u-form-item>
				<u-form-item label="封面" v-if="formData.photoUrl">
					<u-image height="200rpx" mode="heightFix" :src="formData.photoUrl"></u-image>
				</u-form-item>
				<u-form-item label="书名">
					<u-input v-model="formData.name" :disabled="isView" />
				</u-form-item>
				<u-form-item label="作者">
					<u-input v-model="formData.author" :disabled="isView" />
				</u-form-item>
				<u-form-item label="价格">
					<u-input v-model="formData.price" :disabled="isView" />
				</u-form-item>
				<u-form-item label="简介">
					<u-input type="textarea" v-model="formData.description" :disabled="isView" />
				</u-form-item>
			</u-form>
		</div>
		<view class="uni-button-group" v-if="!isView">
			<button type="primary" class="uni-button" @click="save">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isView: false,
				typeShow: false,
				typeList: [],
				formData: {
					stocks: 1
				},
				formOptions: {}
			}
		},
		onShow(){
			
		},
		onLoad(e) {
			this._id = e.id
			let act = e.act ? e.act : ""
			if (act == "view") {
				this.isView = true
			}
			if (this._id) {
				this.getData(e.id)
			}
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			getData(id) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$reqFun.req("books", {
					action: 'view',
					id: id
				}).then(res => {
					uni.hideLoading()
					this.formData = res.result.data[0]
					this.typeInit()
				})
				
			},
			typeInit(){
				this.$reqFun.req("books", {
					action: 'typeList'
				}).then(res => {
					this.typeList = res.result.data.map(o => {
						return {
							value: o._id,
							label: o.name
						}
					});
					var obj= this.typeList.find(item => {
					    return item.value === this.formData.type
					})
					if(obj){
						this.formData.typeName = obj.label
					}
				})
			},
			submit() {
				uni.showLoading({
					mask: true
				})
				this.submitForm()
				// this.$refs.form.validate().then((res) => {
				// 	this.submitForm(res)
				// }).catch(() => {
				// 	uni.hideLoading()
				// })
			},
			save() {
				let sendData = {
					action: "save",
					id: this._id,
					type: this.formData.type,
					stocks: this.formData.stocks,
					name: this.formData.name,
					author: this.formData.author,
					code: this.formData.code,
					douban: this.formData.douban,
					photoUrl: this.formData.photoUrl,
					price: this.formData.price,
					description: this.formData.description
				}
				this.btnLoading = true
				this.$reqFun.req("books", sendData).then(res => {
					this.btnLoading = false
					this.getOpenerEventChannel().emit('refreshData')
					setTimeout(() => uni.navigateBack(), 500)
				})
			},
			typeConfirm(e) {
				console.log(3, e[0])
				this.formData.typeName = e[0].label
				this.formData.type = e[0].value
			},
			scanCode() {
				let _that = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						_that.getBook(res.result)
					}
				});
			},
			getBook(id) {
				uni.showLoading({
					mask: true
				})
				uni.request({
					url: 'https://api.zuk.pw/situ/book/isbn/' + id, //仅为示例，并非真实接口地址。
					data: {
						text: 'uni.request'
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						// this.formData = Object.assign(this.formData,res.data.data)
						this.formData = {
							...this.formData,
							...res.data.data
						}
						uni.hideLoading()
					}
				});
			}
		}
	}
</script>

<style>
	.uni-container {
		padding: 15px;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}
</style>
